<template>
  <van-form @submit="onSubmit" @failde="onFail" class="form">
    <!-- type="tel"手机号码框 -->
    <van-field
      v-model="form.phone"
      type="tel"
      clearable
      name="phone"
      label="手机号码"
      placeholder="请输入手机号码"
      :rules="[
        { required: true, message: '请填写手机号码' },
        { pattern: reg.phone, message: '请输入正确的手机号码' },
      ]"
      @blur="checkPhone"
    />
    <van-field
      v-model="form.captcha"
      name="captcha"
      type="text"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      :rules="[
        { required: true, message: '请填写手机验证码' },
        { pattern: reg.code, message: '请输入4位的手机验证码' },
      ]"
    >
      <template #button>
        <van-button
          v-if="toggle"
          size="small"
          @click="startSend"
          :disabled="!flag"
          native-type="button"
          type="primary"
          >发送验证码</van-button
        >
        <!-- 因为会触发onSubmit和onFail函数 所以加个native-type="button" -->
        <!-- disabled禁止点击 图标变成灰色 -->
        <van-button v-else size="small" disabled native-type="button"
          >剩余 {{ daojishi }} S</van-button
        >
      </template>
    </van-field>
    <div style="margin: 16px" class="links">
      <p>
        <router-link class="color1" :to="{ name: 'zhuce' }"
          >没有账号，立即登录</router-link
        >
      </p>
      <p>
        <router-link class="color2" :to="{ name: 'wangjipwd' }"
          >忘记密码</router-link
        >
      </p>
    </div>
    <div style="margin: 16px">
      <van-button block type="info" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>
<script>
let timeir = null;
export default {
  data() {
    return {
      form: {},
      flag: false,
      daojishi: 20,
      toggle: true,
    };
  },
  methods: {
    startSend() {
      this.toggle = false;
      this.daojishi--;
      timeir = setInterval(() => {
        if (this.daojishi > 0) {
          this.daojishi--;
          this.toggle = false;
        } else {
          clearInterval(timeir);
          timeir = null;
          this.toggle = true;
          this.daojishi = 20;
        }
      }, 1000);

      //同步执行 ajax
      //直接发送验证码
      this.$ajax.sendCaptcha({
        phone:this.form.phone
      })
      .then(res=>{
        if(res.code==200){
          this.$notify({type:'success',message:'验证码发送成功'})
        }else{
          this.ShowError("发送失败")
        }
      })
    },
    onSubmit(values) {
      console.log("submit", values);
      //校验验证码
      //先判断这个phone的用户有没有被注册
      this.$ajax.verifyCaptcha(values)
      .then(res=>{
        if(res.code==200){
          //判断这个手机号是否已经被注册
          this.$ajax.findUser({
            phone:values.phone
          })
          .then(res=>{
            if(res.length>0){
              this.$notify({ type:"success", message:"校验成功"}),
              this.tiao('mine')

              //用户信息存储到vuex
              this.chageUserInfo(res[0])
              // localStorage.setItem("userInfo",JSON.stringify(res[0]))
              // 也可以存储到本地
            }else{
              this.ShowError("用户不存在，请先注册")
            }
          })
        }else{
          this.ShowError("验证码不正确，请重新输入")
        }
      })
    },
    onFail() {
      this.ShowError("信息不正确");
    },
    checkPhone() {
      this.flag = this.reg.phone.test(this.form.phone);
      // this.flag= !this.flag;
    },
  },
  destroyed() {
    clearInterval(timeir);
    timeir = null;
  },
};
</script>
<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: #0f0;
  }
  .color2 {
    color: #f50;
  }
}
</style>